<template>
    <el-pagination background layout="->, total, sizes, prev, pager, next, jumper" :current-page="currentPage"
        :page-sizes="pageSizes" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"
        @size-change="handleSizeChange" />
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

// 定义接收的props
const props = defineProps({
    // 总条数
    total: {
        type: Number,
        required: true,
        default: 0
    },
    // 当前页码
    currentPage: {
        type: Number,
        required: true,
        default: 1
    },
    // 每页条数
    pageSize: {
        type: Number,
        required: true,
        default: 10
    },
    // 页大小选项
    pageSizes: {
        type: Array,
        default: () => [10, 20, 30, 40, 50]
    }
})

// 定义触发的事件
const emit = defineEmits(['size-change', 'current-change'])

// 页大小变化事件
const handleSizeChange = (val) => {
    emit('size-change', val)
}

// 页码变化事件
const handleCurrentChange = (val) => {
    emit('current-change', val)
}
</script>

<style scoped>
/* 可根据需要添加自定义样式 */
.el-pagination {
    text-align: right;
    margin-top: 15px;
}
</style>